<template>
  <layout-slot className="archive-page main-content" class="bg-gray">
    <source-slot/>
    <div class="categorys-item" v-for="item of categories">
      <div class="categorys-title">
        <router-link :to="item.url">
          {{ item.name }}
        </router-link>
        <span> ：{{ item.articles.length }}</span>
      </div>
      <div class="post-lists">
        <div class="post-lists-body">
          <div class="post-list-item" v-for="tmp of item.articles">
            <div class="post-list-item-container">
              <router-link :to="tmp.url">
                <div class="item-label">
                  <div class="item-title">{{ tmp.name }}</div>
                  <div class="item-meta clearfix">
                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </layout-slot>
</template>

<script>
  import VueHeader from "./header";
  import VueFooter from "./footer";
  import LayoutSlot from "./slot/layout-slot";
  import {getCategory} from "@/api/category";
  import SourceSlot from "@/views/skins/GreenBook/slot/source-slot";

  export default {
    name: "archives",
    components: {SourceSlot, VueHeader, VueFooter, LayoutSlot},
    watch:{
      '$route'(n,o){
        // console.log(n)
        if(n){
          this.getCategory()
        }
      }
    },
    data() {
      return {
        categories: [

        ]
      }
    },
    props:{
      url:String,
    },
    methods: {
      getCategory() {
        this.$store.commit("setLoading",true)
        getCategory({type: this.$route.params.url}).then(({data}) => {
          this.categories = data.data.map((item) => {
            let obj = {}
            obj.name = item.categoryTitle
            obj.url = item.categoryURI
            obj.articles = item.articles.map((tmp) => {
              if (tmp) {
                return {
                  name: tmp.articleTitle,
                  url: `/article-detail/${tmp.oId}`,
                  date: tmp.articleCreated
                }
              }
            }).filter((m) => m)
            return obj
          })
          this.$store.commit("setLoading",false)
        })
      }
    },
    mounted() {
      this.getCategory()
    }
  }
</script>

<style lang="scss" scoped>

  fieldset {
    margin: 10px 20px 0px 20px;
    border: .06em dashed #d5d5d5;
    border-radius: 0.3em;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    background-color: #f3f3f3;
  }

  fieldset > legend {
    background-color: #eb5055;
    color: #fff;
    border-radius: .2em;
    padding: .2em .5em;
    font-size: .9em;
  }

  .archives-count {
    width: 100%;
    text-align: center;
    color: #666;
  }

  .archives-count .archives-count-item {
    padding: 0.4em 0 0.6em;
    width: 20%;
    float: left;
    border-radius: 0.3em;
  }


  .archives-count code {
    display: block;
    font-size: 2em;
    color: #707070;
    background: transparent !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archives-count .archives-count-item:hover {
    background: #e8e8e8;
  }

  @media(max-width: 800px) {
    .archives-count code {
      font-size: 15px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }

  @media(max-width: 375px) {
    .archives-count code {
      font-size: 14px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }


</style>
